<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>汇总</title>
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_259759_0v92g5urpory66r.css">
    <link rel="stylesheet" type="text/css" href="../style/style.css">
    <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
    <script src="../lib/echarts.min.js"></script>
    <script src="../lib/laydate/laydate.js"></script>
</head>
<body>
<div class="header clearfix">
    <a href="" class="logo"></a>
    <div class="option">
        <div class="show">熊猫公寓数据统计<i class="iconfont icon-jiantou2"></i></div>
    </div>
</div>
<div class="row" style="margin-top: 68px;">
    <div class="section">
        <div class="section-head clearfix">
            <div class="txt">所有门店总统计</div>
            <div class="date clearfix">
                <label>日期</label>
                <div class="input" id="input1">
                    2017-10-01 至 2018-01-12
                </div>
            </div>
        </div>
        <div class="map-row clearfix">
            <div class="filter-row-in clearfix">
                <div class="btns clearfix">
                    <a href="javascript:void(0);" data-index="0" class="lineToggle cur" data-label="四惠店">四惠店</a>
                    <a href="javascript:void(0);" data-index="0" class="lineToggle cur" data-label="北工大店">北工大店</a>
                    <a href="javascript:void(0);" data-index="0" class="lineToggle cur" data-label="百合湾店">百合湾店</a>
                    <a href="javascript:void(0);" data-index="0" class="lineToggle cur" data-label="清水湾店">清水湾店</a>
                </div>
                <div class="mapicon clearfix">
                    <div class="icon"><i style="background: #1FCF6C;"></i>四惠店</div>
                    <div class="icon"><i style="background: #8E8D00;"></i>北工大店</div>
                    <div class="icon"><i style="background: #1C7E84;"></i>百合湾店</div>
                    <div class="icon"><i style="background: #5B4275;"></i>清水湾店</div>
                </div>
            </div>
            <div>
                <div class="map-box-full" id="yejianchuzu"></div>
            </div>
        </div>
    </div>
</div>
<div class="row" style="margin-top: 28px;">
    <div class="section">
        <div class="section-head clearfix">
            <div class="txt">新签约合同数及空置房间对比</div>
            <div class="date clearfix">
                <label>日期</label>
                <div class="input" id="input2">
                    2017-10-01 至 2018-01-12
                </div>
            </div>
        </div>
        <div class="map-row clearfix">
            <div class="filter-row-in clearfix">
                <div class="btns clearfix">
                    <a href="javascript:void(0);" data-index="1" data-key="sihuidian" class="barSelect cur" data-label="四惠店">四惠店</a>
                    <a href="javascript:void(0);" data-index="1" data-key="beigongda" class="barSelect" data-label="北工大店">北工大店</a>
                    <a href="javascript:void(0);" data-index="1" data-key="baihewan" class="barSelect" data-label="百合湾店">百合湾店</a>
                    <a href="javascript:void(0);" data-index="1" data-key="qingshuiwan" class="barSelect" data-label="清水湾店">清水湾店</a>
                </div>
                <div class="mapicon clearfix">
                    <div class="icon"><i style="background: #00D9CF;"></i>新签</div>
                    <div class="icon"><i style="background: #1FCF6C;"></i>空置</div>
                </div>
            </div>
            <div>
                <div class="map-box-full" id="xinqianyueduibi"></div>
            </div>
        </div>
    </div>
</div>
<div class="row" style="margin-top: 28px;">
    <div class="section">
        <div class="section-head clearfix">
            <div class="txt">客户满意统计</div>
            <div class="date clearfix">
                <label>日期</label>
                <div class="input" id="input3">
                    2017-10-01 至 2018-01-12
                </div>
            </div>
        </div>
        <div class="map-row clearfix">
            <div class="map-box" id="kehumanyi1" style="width: 33%"></div>
            <div class="map-box" id="kehumanyi2" style="width: 66%"></div>
        </div>
    </div>
</div>
</body>
<script>
    laydate.render({
        elem: '#input1',
        range: '至',
        format: 'yyyy-MM-dd',
        theme: '#1CCE6C'
    });
    laydate.render({
        elem: '#input2',
        range: '至',
        format: 'yyyy-MM-dd',
        theme: '#1CCE6C'
    });
    laydate.render({
        elem: '#input3',
        range: '至',
        format: 'yyyy-MM-dd',
        theme: '#1CCE6C'
    });

    var xData = [];
    var chartsItem = [];

    for(var i = 1; i < 20; i++) {
        if(i < 10) {
            xData.push('01.0' + i);
        }else {
            xData.push('01.' + i);
        }
    }
    /******所有门店总统计******/
    var yejianchuzuOption = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            show: false,
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            show: false,
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData,
            axisLine: {
                lineStyle: {
                    color: '#4C5164'
                }
            },
            axisLabel: {
                color: '#FFF'
            },
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#4C5164'
                }
            },
            axisLabel: {
                color: '#FFF'
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: ['#363C51']
                }
            }
        },
        series: [
            {
                name:'四惠店',
                type:'line',
                stack: '总量',
                data:[120, 132, 101, 134, 90, 230, 132, 401, 134,210,332, 101,120, 132, 301, 134, 134, 90, 200],
                color: '#1FCF6C',
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'北工大店',
                type:'line',
                stack: '总量2',
                data:[220, 182, 191, 234, 290, 330, 310, 82, 191, 234, 290, 330,182, 191, 234, 290, 330, 310, 240],
                color: '#8E8D00',
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'百合湾店',
                type:'line',
                stack: '总量3',
                data:[220, 152, 121, 164, 50, 238, 122, 221, 164,220,352, 121,130, 132, 221, 139, 214, 190, 240],
                color: '#7F2930',
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'清水湾店',
                type:'line',
                stack: '总量4',
                data:[ 238, 122, 221, 164,220,352, 121,130,490, 437, 234,230, 310, 82, 191, 234, 290, 330,188],
                color: '#5B4275',
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            }
        ]
    };
    var yejianchuzuChart = echarts.init(document.getElementById('yejianchuzu'));
    chartsItem.push(yejianchuzuChart)
    yejianchuzuChart.setOption(yejianchuzuOption);

    /******新签约合同数及空置房间对比******/
    var xinqianData = {
        'sihuidian': [
            [120, 132, 101, 134, 90, 230, 132, 401, 134,210,332, 101,120, 132, 301, 134, 134, 90, 200],
            [220, 152, 121, 164, 50, 238, 122, 221, 164,220,352, 121,130, 132, 221, 139, 214, 190, 240],
        ],
        'beigongda': [
            [220, 182, 191, 234, 290, 330, 310, 82, 191, 234, 290, 330,182, 191, 234, 290, 330, 310, 240],
            [ 238, 122, 221, 164,220,352, 121,130,490, 437, 234,230, 310, 82, 191, 234, 290, 330,188],
        ],
        'baihewan': [
            [ 238, 122, 221, 164,220,352, 121,130,490, 437, 234,230, 310, 82, 191, 234, 290, 330,188],
            [220, 152, 121, 164, 50, 238, 122, 221, 164,220,352, 121,130, 132, 221, 139, 214, 190, 240],
        ],
        'qingshuiwan': [
            [220, 152, 121, 164, 50, 238, 122, 221, 164,220,352, 121,130, 132, 221, 139, 214, 190, 240],
            [ 238, 122, 221, 164,220,352, 121,130,490, 437, 234,230, 310, 82, 191, 234, 290, 330,188],
        ]
    };
    var xinqianyueduibiOption =  {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            show: false,
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : xData,
                axisLine: {
                    lineStyle: {
                        color: '#4C5164'
                    }
                },
                axisLabel: {
                    color: '#FFF'
                },
            }
        ],
        yAxis : [
            {
                type : 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: ['#363C51']
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#4C5164'
                    }
                },
                axisLabel: {
                    color: '#FFF'
                },
            }
        ],
        series : [
            {
                name:'新签',
                type:'bar',
                data:[120, 132, 101, 134, 90, 230, 132, 401, 134,210,332, 101,120, 132, 301, 134, 134, 90, 200],
                color: '#00D9CF',
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'空置',
                type:'bar',
                stack: '空置',
                data:[220, 152, 121, 164, 50, 238, 122, 221, 164,220,352, 121,130, 132, 221, 139, 214, 190, 240],
                color: '#1FCF6C',
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            }
        ]
    };
    var xinqianyueduibiChart = echarts.init(document.getElementById('xinqianyueduibi'));
    chartsItem.push(xinqianyueduibiChart);
    xinqianyueduibiOption.series[0].data = xinqianData.sihuidian[0];
    xinqianyueduibiOption.series[1].data = xinqianData.sihuidian[1];
    xinqianyueduibiChart.setOption(xinqianyueduibiOption);

    $('.lineToggle').click(function () {
        var label = $(this).attr('data-label');
        var classname = $(this).attr('class');
        var index = parseInt($(this).attr('data-index'));
        if(classname.indexOf('cur') > -1) {
            $(this).removeClass('cur');
        }else {
            $(this).addClass('cur');
        }
        chartsItem[index].dispatchAction({
            type: 'legendToggleSelect',
            name: label
        })
    });

    $('.barSelect').click(function () {
        $(this).parent().find('.cur').removeClass('cur');
        $(this).addClass('cur');
        var index = parseInt($(this).attr('data-index'));
        var key = $(this).attr('data-key');
        xinqianyueduibiOption.series[0].data = xinqianData[key][0];
        xinqianyueduibiOption.series[1].data = xinqianData[key][1];
        chartsItem[index].setOption(xinqianyueduibiOption, true)
    });

    /******客户满意统计******/
    var kehumanyi1Option = {
        title: {
            text: '',
            textStyle: {
                color: '#1DCE6C',
                fontSize: '14px'
            },
            left: '40',
            top: '20'
        },

        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series : [
            {
                name:'满意度',
                type:'pie',
                radius : '55%',
                center: ['50%', '50%'],
                data:[
                    {value:335, name:'非常满意'},
                    {value:310, name:'很不满意'},
                    {value:274, name:'满意'},
                    {value:235, name:'不太满意'},
                    {value:400, name:'一般'},
                ].sort(function (a, b) { return a.value - b.value; }),
                color: ['#8E8D00', '#7F2930', '#1C7E84', '#5B4375', '#277A54'],
                roseType: 'radius',
                label: {
                    normal: {
                        formatter: '{a}{d}%',
                        textStyle: {
                            color: '#FFF'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    }
                },
                itemStyle: {
                    normal: {
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },

                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    }
    var kehumanyi1Chart = echarts.init(document.getElementById('kehumanyi1'));
    kehumanyi1Chart.setOption(kehumanyi1Option);

    var kehumanyi2Option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            show: false,
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            show: false,
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData.slice(0, 9),
            axisLine: {
                lineStyle: {
                    color: '#4C5164'
                }
            },
            axisLabel: {
                color: '#FFF'
            },
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#4C5164'
                }
            },
            axisLabel: {
                color: '#FFF'
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: ['#363C51']
                }
            }
        },
        series: [
            {
                name:'非常满意',
                type:'line',
                stack: '满意度1',
                data:[120, 132, 101, 134, 90, 230, 132, 401, 134],
                color: '#8E8D00',
            },
            {
                name:'很不满意',
                type:'line',
                stack: '满意度2',
                data:[220, 182, 191, 234, 290, 330, 310, 82, 191],
                color: '#7F2930',
            },
            {
                name:'满意',
                type:'line',
                stack: '满意度3',
                data:[220, 152, 121, 164, 50, 238, 122, 221, 164],
                color: '#1C7E84',
            },
            {
                name:'不太满意',
                type:'line',
                stack: '满意度4',
                data:[ 238, 122, 221, 164,220,352, 121,130,490],
                color: '#5B4375',
            },
            {
                name:'一般',
                type:'line',
                stack: '满意度5',
                data:[ 220,352, 121,130, 132, 221, 139, 214, 190],
                color: '#277A54',
            }
        ]
    };
    var kehumanyi2Chart = echarts.init(document.getElementById('kehumanyi2'));
    chartsItem.push(kehumanyi2Chart)
    kehumanyi2Chart.setOption(kehumanyi2Option);
</script>
</html>